<template>
  <div class="progress-bar">
    <!--进度点-->
    <div v-if="$slots.dot" class="w-0 d-flex-center position-absolute" style="transition: all 0.5s;" :style="{ left: props.percentage + '%' }">
      <div>
        <slot name="dot" />
      </div>
    </div>
    <!--svg进度条-->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" style="border-radius: inherit;">
      <defs>
        <!--花纹-->
        <pattern
          v-if="props.pattern" :id="`${componentID}-pattern`" :width="props.patternWidth"
          height="100%"
          patternUnits="userSpaceOnUse"
        >
          <slot name="pattern">
            <rect :width="props.patternWidth - props.patternGap" height="100%" fill="white" />
          </slot>
        </pattern>
        <!--轨道蒙版-->
        <mask v-if="props.pattern" :id="`${componentID}-mask-track`">
          <rect :fill="patternMaskFill" width="100%" height="100%" />
        </mask>
        <!--进度条蒙版-->
        <mask :id="`${componentID}-mask-bar`">
          <rect :fill="patternMaskFill" :width="props.percentage + '%'" height="100%" style="transition: all 0.5s;" />
        </mask>
      </defs>
      <!--轨道-->
      <g :mask="props.pattern ? `url('#${componentID}-mask-track')` : 'none'">
        <foreignObject width="100%" height="100%">
          <slot name="track">
            <div xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;" :style="{ background: props.bgColor }" />
          </slot>
        </foreignObject>
      </g>
      <!--进度条-->
      <g :mask="`url('#${componentID}-mask-bar')`">
        <foreignObject width="100%" height="100%">
          <slot name="progressbar">
            <div xmlns="http://www.w3.org/1999/xhtml" :style="{ background: progressColor }" style="height: 100%;" />
          </slot>
        </foreignObject>
      </g>
    </svg>
  </div>
</template>

<script lang="ts" setup>
import { withDefaults } from 'vue'
import { getComponentID } from './util'

const props = withDefaults(defineProps<{
  // 当前进度
  percentage: number,
  // 背景颜色(使用track插槽后无效)
  bgColor?: string,
  // 显示花纹
  pattern?: boolean,
  // 花纹宽度
  patternWidth?: number,
  // 花纹间隙(使用pattern插槽后无效)
  patternGap?: number,
  // 进度条颜色(使用progressbar插槽后无效)
  colors?: string | string[]
}>(), {
  bgColor: '#ebeef5',
  pattern: false,
  patternWidth: 20,
  patternGap: 10,
  colors: 'var(--el-color-primary)'
})

const componentID = ref(getComponentID())

onMounted(() => {
  loadProgressColor()
})

// region TODO 蒙版
// 花纹背景颜色，如果不显示花纹则为白色（白色显示）
const patternMaskFill = computed(() => props.pattern ? `url('#${componentID.value}-pattern')` : 'white')
// endregion

// region TODO 颜色
const progressColor = ref('')
function loadProgressColor () {
  if (typeof props.colors === 'string') progressColor.value = props.colors
  else progressColor.value = `linear-gradient(to right, ${props.colors.join(', ')})`
}

// endregion

</script>

<style lang="scss" scoped>
.progress-bar {
  position: relative;
  display: flex;
  align-items: center;
}
</style>
